<template>
  <div>
      <div class="wk-header">
        周末攻略
      </div>
      <div class="wk-center" v-for="item of list" :key="item.id">
        <div class="center-p"></div>
        <img class="wk-img" :src="item.imgUrl"/>
        <p class="wk-title">
          {{item.title}}
        </p>
        <p class="wk-desc">
          {{item.desc}}
        </p>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
    .wk-header
      line-height: 0.8rem
      background: #eee
      text-indent: 0.2rem
      font-weight: 600
    .wk-center
      height: 0
      padding-bottom: 52%
      .center-p
        display: block
        background: #cacaca
        height: 0.2rem
      .wk-img
        width: 100%
      .wk-title
        line-height: 0.5rem
        text-indent: .1rem
      .wk-desc
        text-indent: .1rem
        color: #ccc
        font-size: 12px
</style>
